<template>
  <div id="app">
    <div style="float: left;padding-left: 50px">
      <h3>全国省市区街道行政村五级联动(异步加载)</h3>
      <a-tree
          :tree-data="treeData"
          @select="onSelect"
          @check="onCheck"
          @expand="onExpand"
      >
      </a-tree>
    </div>

    <div style="float: right;padding-right: 35%">
    <h3>成都东部新区二级联动(一次加载)</h3>
    <a-tree :tree-data="treeData2">
    </a-tree>
    </div>
  </div>
</template>

<script>
const axios = require('axios');
//import HelloWorld from './components/HelloWorld.vue'
//http://lsk.red:8080/division/findAllProvince


export default {
  name: 'App',
  components: {
    // HelloWorld
  },
  data() {
    return {
      treeData: [],
      treeData2:[],
      expandedKey: [],
      findAllChildrenURL: 'http://lsk.red:8080/division/',
    };
  },
  created() {
    let that = this;
    //let url='http://lsk.red:8080/division/findAllChildren/000000';
    axios.get(that.findAllChildrenURL + '/findAllChildren/000000')
        .then((res) => {
          that.treeData = res.data.data;

        })
        .catch((err) => {
          console.error(err);

        });
    //东部新区
    //http://lsk.red:8080/division/findAllEasternNewArea
    axios.get(that.findAllChildrenURL+'/findAllEasternNewArea')
        .then((res) => {
          that.treeData2 = res.data.data;

        })
        .catch((err) => {
          console.error(err);

        });


  },
  methods: {
    onSelect(selectedKeys, info) {
      console.log('selected', selectedKeys, info);
    },
    onCheck(checkedKeys, info) {
      console.log('onCheck', checkedKeys, info);
      this.onSelect(checkedKeys, info);
    },
    onExpand(expandedKeys, info) {
      let that = this;
      console.log(expandedKeys);
      //console.log(expandedKeys[0]);
      console.log(info);
      let curKey = expandedKeys[expandedKeys.length - 1];
      console.log(curKey);
      if (!that.expandedKey.includes(curKey)) {
        that.expandedKey.push(expandedKeys);
        axios.get(that.findAllChildrenURL +'/findAllChildren/'+ curKey)
            .then((res) => {
              //children
              let children = res.data.data;

              //省 51 0000
              //市 5101 00
              //区 510107 6位
              //街道 510107001 9位
              if (curKey.length === 9) {
                //县区
                //找到对应省份
                let proKey = curKey.substr(0, 2) + "0000";
                //找到对应城市
                let cityKey = curKey.substr(0, 4) + "00";
                //找到对应县区
                let areaKey = curKey.substr(0, 6);
                for (let i in that.treeData) {
                  if (that.treeData[i].key === proKey) {
                    //遍历地级市
                    for (let j in that.treeData[i].children) {
                      if (that.treeData[i].children[j].key === cityKey) {
                        //遍历县区
                        for (let k in that.treeData[i].children[j].children) {
                          //let tmp = that.treeData[i].children[j].children[k];
                          console.log("k->"+k);
                          if (that.treeData[i].children[j].children[k].key === areaKey) {
                            //遍历街道
                            for (let m in that.treeData[i].children[j].children[k].children) {
                              //let tmp2 = that.treeData[i].children[j].children[k].children[m];
                              if (that.treeData[i].children[j].children[k].children[m].key === curKey) {
                                that.$set(that.treeData[i].children[j].children[k].children[m], 'children', children);
                              }
                            }
                          }
                        }
                      }
                    }
                  }
                }


                //街道
              } else if (curKey.length === 6) {
                if (curKey.substr(2, 6) === "0000") {
                  //触发的为省级点击
                  //地级市
                  //追加到对应的省份的children
                  let proKey = curKey.substr(0, 2) + "0000";
                  for (let i in that.treeData) {
                    if (that.treeData[i].key === proKey) {
                      that.$set(that.treeData[i], 'children', children);
                      break;
                    }
                  }
                } else if (curKey.substr(4, 6) === "00") {
                  //找到对应省份
                  let proKey = curKey.substr(0, 2) + "0000";
                  //找到对应城市
                  let cityKey = curKey.substr(0, 4) + "00";
                  for (let i in that.treeData) {
                    if (that.treeData[i].key === proKey) {
                      //遍历地级市
                      for (let j in that.treeData[i].children) {
                        if (that.treeData[i].children[j].key === cityKey) {
                          that.$set(that.treeData[i].children[j], 'children', children);
                        }
                      }
                    }
                  }
                } else {
                  //找到对应省份
                  let proKey = curKey.substr(0, 2) + "0000";
                  //找到对应城市
                  let cityKey = curKey.substr(0, 4) + "00";
                  //找到对应县区
                  let areaKey = curKey.substr(0, 6);
                  for (let i in that.treeData) {
                    if (that.treeData[i].key === proKey) {
                      //遍历地级市
                      for (let j in that.treeData[i].children) {
                        if (that.treeData[i].children[j].key === cityKey) {
                          //遍历县区
                          for (let k in that.treeData[i].children[j].children) {
                            //let tmp = that.treeData[i].children[j].children[k];
                            if (that.treeData[i].children[j].children[k].key === areaKey) {
                              //添加街道
                              that.$set(that.treeData[i].children[j].children[k], 'children', children);
                            }
                          }
                        }
                      }
                    }
                  }
                }
              }
            })
            .catch((err) => {
              console.error(err);

            })

      }


    }
    // onLoadData(treeNode) {
    //   console.log(treeNode);
    //   // return new Promise(resolve => {
    //   //   if (treeNode.dataRef.children) {
    //   //     resolve();
    //   //     return;
    //   //   }
    //   //   setTimeout(() => {
    //   //     treeNode.dataRef.children = [
    //   //       { title: 'Child Node', key: `${treeNode.eventKey}-0` },
    //   //       { title: 'Child Node', key: `${treeNode.eventKey}-1` },
    //   //     ];
    //   //     this.treeData = [...this.treeData];
    //   //     resolve();
    //   //   }, 1000);
    //   // });
    // },
  },
};
</script>

<style>
</style>
